<script setup lang="ts">
import { ref, watch, getCurrentInstance } from 'vue';
import modal from '@/components/modal.vue';
import { ElDialog } from 'element-plus'
import 'element-plus/es/components/dialog/style/css';
import bulletinBoard from '@/components/bulletinBoard.vue';
import Header from '@/components/layout/Header.vue';
import { userStore } from '@/store/user';
import { kanbanStore } from '@/store/user';
import { logo, getList } from '@/apis/currency';
import { onMounted, onUnmounted } from 'vue';
import { CoinItem, Logo } from '@/interfaces/currency';
import router from '@/router';

const visible = ref(false)
const defaultActiveMainIndicator = ref('')
const defaultActiveSubIndicator = ref('')
const defaultTab = ref('')
const type = ref<'twoChars' | 'threeChars' | 'fourChars' | 'sixChars'>('twoChars')
const index = ref(0)
const instance = getCurrentInstance()
let currencySocket: any
const currencyId = ref<string>()
const coinList = ref<CoinItem[]>([])
const logoList = ref<Logo>({})
const width = ref(0)
const height = ref(0)
const resizeFn = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight - 65
}
const chartType = ref('')

const connectCurrency = () => {
    if (currencyId.value) {
        currencySocket.unsubscribe(currencyId.value, '/topic/market')
    }
    currencyId.value = Date.now().toString(36) + Math.floor(Math.random() * 1000).toString(36)
    currencySocket.subscribe(currencyId.value, `/topic/market`, (data: CoinItem) => {
        let item = coinList.value?.find(item => item.currencyPair === data.currencyPair)
        if (item) {
            item.src = "https://file.uhx.io/" + logoList.value[item.currencyPair.split('-')[0]]
            item.percentText = (item.percent * 100).toFixed(2) + '%'
            Object.assign(item, data)
        }
        item = data
    })
}


const changeCoin = (e: string, index: number = 0) => {
    if (e) {
        kanbanStore().setCoinlineName(chartType.value + 'Chars', index, e)
    }
}
const showindicator = (e: string = 'ma', x: string = 'main', typeInfo: 'twoChars' | 'threeChars' | 'fourChars' | 'sixChars', indexInfo: number = 0) => {
    type.value = typeInfo
    index.value = indexInfo
    visible.value = true
    defaultTab.value = x
    if (defaultTab.value == 'main') {
        defaultActiveMainIndicator.value = e || 'ma'
        defaultActiveSubIndicator.value = 'vol'

    } else {
        defaultActiveMainIndicator.value = 'ma'
        defaultActiveSubIndicator.value = e || 'vol'
    }
}

watch(() => userStore().currencySocket, (val) => {
    if (val) {
        if (instance) {
            currencySocket = instance.appContext.config.globalProperties.$currencySocket
            if (currencySocket.connected) {
                connectCurrency()
            }
        }
    }
}, { immediate: true })

onMounted(async () => {
    const type = router.currentRoute.value.query.chart as string || 'two'
    chartType.value = ['two', 'three', 'four', 'six'].includes(type) ? type : 'two'
    window.addEventListener('resize', resizeFn)
    resizeFn()
    logoList.value = await logo()
    const res = await getList()
    coinList.value = res.map(item => {
        item.src = "https://file.uhx.io/" + logoList.value[item.currencyPair.split('-')[0]]
        item.percentText = (item.percent * 100).toFixed(2) + '%'
        return item
    })
})

onUnmounted(() => {
    if (currencySocket) {
        currencySocket.unsubscribe(currencyId.value, `/topic/market`)
    }
    window.removeEventListener('resize', resizeFn)
})
</script>

<template>
    <ElDialog destroy-on-close v-model="visible" width="672px" title="" style="padding: 0;" :show-close="false">
        <modal :type="type" :index="index" :defaultActiveMainIndicator="defaultActiveMainIndicator"
            :defaultActiveSubIndicator="defaultActiveSubIndicator" :defaultTab="defaultTab" @close="visible = false" />
    </ElDialog>
    <Header />
    <div v-if="chartType === 'two'"
        class="flex items-center border-0 border-t-[1px] border-solid dark:border-[#252a34] border-[#ededed] relative">
        <div :style="{ width: width / 2 + 'px', height: height + 'px' }">
            <bulletinBoard @showindicator="(e, x) => showindicator(e, x, 'twoChars', 0)"
                @changeCoin="changeCoin($event, 0)" :coinList="coinList" :info="{ width: width / 2, height }" :index="0"
                type="twoChars" :coinInfo="kanbanStore().twoChars[0]" id="chart1">
            </bulletinBoard>
        </div>
        <div class="h-[calc(100vh-65px)] w-[1px] bg-[#ededed] dark:bg-[#252a34] absolute top-0 left-1/2 z-[11]"></div>
        <div :style="{ width: width / 2 + 'px', height: height + 'px' }">
            <bulletinBoard @showindicator="(e, x) => showindicator(e, x, 'twoChars', 1)"
                @changeCoin="changeCoin($event, 1)" :coinList="coinList" :info="{ width: width / 2, height }" :index="1"
                type="twoChars" :coinInfo="kanbanStore().twoChars[1]" id="chart2">
            </bulletinBoard>
        </div>
    </div>
    <div v-else-if="chartType === 'three'"
        class="flex items-center border-0 border-t-[1px] border-solid dark:border-[#252a34] border-[#ededed] relative flex-wrap">
        <div :style="{ width: width + 'px', height: height / 2 + 'px' }">
            <bulletinBoard @showindicator="(e, x) => showindicator(e, x, 'threeChars', 2)"
                @changeCoin="changeCoin($event, 2)" :coinList="coinList" :info="{ width: width, height: height / 2 }"
                :index="2" type="threeChars" :coinInfo="kanbanStore().threeChars[2]" id="chart3">
            </bulletinBoard>
        </div>
        <div :style="{ width: width / 2 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard @showindicator="(e, x) => showindicator(e, x, 'threeChars', 0)"
                @changeCoin="changeCoin($event, 0)" :coinList="coinList"
                :info="{ width: width / 2, height: height / 2 }" :index="0" type="threeChars"
                :coinInfo="kanbanStore().threeChars[0]" id="chart1">
            </bulletinBoard>
        </div>
        <div class="h-[calc(50vh-33px)] w-[1px] bg-[#ededed] dark:bg-[#252a34] absolute top-[50%] left-1/2 z-[11]"></div>
        <div class="h-[1px] w-full bg-[#ededed] dark:bg-[#252a34] absolute top-[calc(50vh-33px)] left-0 z-[11]">
        </div>
        <div :style="{ width: width / 2 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard @showindicator="(e, x) => showindicator(e, x, 'threeChars', 1)"
                @changeCoin="changeCoin($event, 1)" :coinList="coinList"
                :info="{ width: width / 2, height: height / 2 }" :index="1" type="threeChars"
                :coinInfo="kanbanStore().threeChars[1]" id="chart2">
            </bulletinBoard>
        </div>

    </div>
    <div v-else-if="chartType === 'four'"
        class="flex items-center border-0 border-t-[1px] border-solid border-[#ededed] dark:border-[#252a34] relative flex-wrap">
        <div :style="{ width: width / 2 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard @changeCoin="changeCoin($event, 0)" :coinList="coinList"
                :info="{ width: width / 2, height: height / 2 }" :index="0" type="fourChars"
                :coinInfo="kanbanStore().fourChars[0]" id="chart1">
            </bulletinBoard>
        </div>
        <div class="h-[calc(100vh-65px)] w-[1px] bg-[#ededed] dark:bg-[#252a34] absolute top-0 left-1/2 z-[11]"></div>
        <div class="h-[1px] w-full bg-[#ededed] dark:bg-[#252a34] absolute top-[calc(50vh-33px)] left-0"></div>
        <div :style="{ width: width / 2 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard @changeCoin="changeCoin($event, 1)" :coinList="coinList"
                :info="{ width: width / 2, height: height / 2 }" :index="1" type="fourChars"
                :coinInfo="kanbanStore().fourChars[1]" id="chart2">
            </bulletinBoard>
        </div>
        <div :style="{ width: width / 2 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard @changeCoin="changeCoin($event, 2)" :coinList="coinList"
                :info="{ width: width / 2, height: height / 2 }" :index="0" type="fourChars"
                :coinInfo="kanbanStore().fourChars[2]" id="chart3">
            </bulletinBoard>
        </div>
        <div :style="{ width: width / 2 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard @changeCoin="changeCoin($event, 3)" :coinList="coinList"
                :info="{ width: width / 2, height: height / 2 }" :index="1" type="fourChars"
                :coinInfo="kanbanStore().fourChars[3]" id="chart4">
            </bulletinBoard>
        </div>
    </div>
    <div v-else-if="chartType === 'six'"
        class="flex items-center border-0 border-t-[1px] border-solid border-[#ededed] dark:border-[#252a34] relative flex-wrap">
        <div :style="{ width: width / 3 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard :coinList="coinList" :info="{ width: width / 3, height: height / 2 }" :index="0"
                type="sixChars" @changeCoin="changeCoin($event, 0)" :coinInfo="kanbanStore().sixChars[0]" id="chart1">
            </bulletinBoard>
        </div>
        <div :style="{ width: width / 3 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard :coinList="coinList" :info="{ width: width / 3, height: height / 2 }" :index="1"
                type="sixChars" @changeCoin="changeCoin($event, 1)" :coinInfo="kanbanStore().sixChars[1]" id="chart2">
            </bulletinBoard>
        </div>
        <div :style="{ width: width / 3 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard :coinList="coinList" :info="{ width: width / 3, height: height / 2 }" :index="2"
                type="sixChars" @changeCoin="changeCoin($event, 2)" :coinInfo="kanbanStore().sixChars[2]" id="chart3">
            </bulletinBoard>
        </div>
        <div class="h-[calc(100vh-65px)] w-[1px] bg-[#ededed] dark:bg-[#252a34] absolute top-0 left-1/3 z-[11]"></div>
        <div class="h-[calc(100vh-65px)] w-[1px] bg-[#ededed] dark:bg-[#252a34] absolute top-0 left-2/3 z-[11]"></div>
        <div class="h-[1px] w-full bg-[#ededed] dark:bg-[#252a34] absolute top-[calc(50vh-33px)] left-0"></div>
        <div :style="{ width: width / 3 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard :coinList="coinList" :info="{ width: width / 3, height: height / 2 }" :index="3"
                type="sixChars" @changeCoin="changeCoin($event, 3)" :coinInfo="kanbanStore().sixChars[3]" id="chart4">
            </bulletinBoard>
        </div>
        <div :style="{ width: width / 3 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard :coinList="coinList" :info="{ width: width / 3, height: height / 2 }" :index="4"
                type="sixChars" @changeCoin="changeCoin($event, 4)" :coinInfo="kanbanStore().sixChars[4]" id="chart5">
            </bulletinBoard>
        </div>
        <div :style="{ width: width / 3 + 'px', height: height / 2 + 'px' }">
            <bulletinBoard :coinList="coinList" :info="{ width: width / 3, height: height / 2 }" :index="5"
                type="sixChars" @changeCoin="changeCoin($event, 5)" :coinInfo="kanbanStore().sixChars[5]" id="chart6">
            </bulletinBoard>
        </div>
    </div>
</template>

<style>
.el-dialog__header {
    padding: 0 !important;
}
</style>